<template>
	<scroll-view class="login" scroll-y="true" style="height: 100vh;">
		<view class="content">
			<image class="bg" src="../../static/image/login_bg.png" mode=""></image>
			<image class="logo" src="../../static/image/logo.png" mode=""></image>
			<view class="title">
				社会心理服务管理平台
			</view>
			<view class="inputPhoneView">
				<p>姓名</p>
				<u-input class="login_input" :type="number" :border="true" v-model="inputAccount"
					placeholder="请输入姓名"></u-input>
				<p>手机号</p>
				<u-input class="login_input" :type="text" :border="true" v-model="inputPhone"
					placeholder="请输入手机号"></u-input>
				<p>身份证号</p>
				<u-input class="login_input" :type="text" :border="true" v-model="inputIDNum"
					placeholder="请输入身份证号"></u-input>
				<p>性别</p>
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="r1" :checked="sex === '男'" />男
					</label>
					<label class="radio">
						<radio value="r2" :checked="sex === '女'" />女
					</label>
				</radio-group>
			</view>
		</view>
		<view class="login_btn" :style="{ bottom: keyboardHeight > 0 ? '-100rpx' : '6%' }"
			@click="phoneAndAccountTologin">登录</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		docAppletSavePatientByQr
	} from '../../apis/api';
	import {
		setBaseURL
	} from '../../utils/request.js'

	const currentUrl = window.location.origin;

	/// 手机号
	const inputPhone = ref("")
	/// 姓名
	const inputAccount = ref("")
	/// 身份证号
	const inputIDNum = ref("")
	/// 性别
	const sex = ref("")
	/// 接收参数
	/// 项目id
	const projectId = ref("")
	/// 机构code
	const orgCode = ref("")
	/// 医生编码
	const docCode = ref("")

	const jumpUrl = ref("")
	const keyboardHeight = ref(0)

	onLoad((e) => {
		console.log('currentUrl' + currentUrl)
		setBaseURL(currentUrl)
		console.log(e)
		projectId.value = e.projectId
		orgCode.value = e.orgCode
		docCode.value = e.docCode
	})

	onMounted(() => {
		// 监听键盘高度变化
		uni.onKeyboardHeightChange(res => {
			keyboardHeight.value = res.height
		})
	})

	onUnmounted(() => {
		// 移除键盘监听
		uni.offKeyboardHeightChange()
	})

	// 单选
	const radioChange = (e) => {
		console.log(e)
		sex.value = e.detail.value === 'r1' ? '男' : '女'
	}

	const phoneAndAccountTologin = async () => {
		if (inputAccount.value.length == 0 || inputPhone.value.length != 11 || inputIDNum.value.length != 18 || sex
			.value.length == 0) {
			uni.showToast({
				title: '请输入正确信息',
				icon: 'error'
			})
			return
		}
		const sexStr = sex.value === '男' ? '1' : '2';
		try {
			const loginRes = await docAppletSavePatientByQr({
				projectId: projectId.value,
				orgCode: orgCode.value,
				docCode: docCode.value,
				patientName: inputAccount.value,
				patientSex: sexStr,
				patientIdCard: inputIDNum.value,
				patientTel: inputPhone.value
			});
			console.log("后台得到的登录信息" + loginRes)
			jumpUrl.value = JSON.parse(JSON.stringify(loginRes.data))
			window.location.href = jumpUrl.value
		} catch (error) {
			console.log("后台登录报错信息" + error.message)
			uni.showToast({
				title: error.message,
				icon: 'error'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		position: relative;

		.content {
			position: relative;
		}

		.bg {
			width: 100%;
			height: 100vh;
			display: block;
		}

		.logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);
		}

		.title {
			color: #fff;
			border-radius: 50%;
			position: absolute;
			top: 33%;
			left: 50%;
			transform: translateX(-50%);
			width: 80%;
			font-size: 40rpx;
			text-align: center;
		}

		.inputPhoneView {
			background-color: #fff;
			border-radius: 10rpx;
			position: absolute;
			top: 40%;
			left: 5%;
			width: 95%;
			transform: translateX(-2.5%);
			padding: 16rpx;

			.login_input {
				margin-top: 16rpx;
				margin-bottom: 16rpx;
			}
		}

		.login_btn {
			width: 622rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			font-weight: 600;
			font-size: 28rpx;
			left: 50%;
			transform: translateX(-50%);
			transition: bottom 0.3s;
			z-index: 50;
		}
	}
</style>